<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%
	try {
		if (pageContext.findAttribute("me") == null) {
			response.sendRedirect(request.getContextPath()+ "/login.jsp");
			return;
		}
%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"  src="${ ctx}/scripts/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" 	src="${ ctx}/scripts/jquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript"  src="${ ctx}/scripts/jquery/jqueryui.bannerize.js"></script>
<script type="text/javascript" src="${ ctx}/scripts/jquery/jquery.qtip-1.0.0-rc3.js"></script>

<script type="text/javascript"  src="${ ctx}/scripts/article.js"></script>
<link href="${ ctx}/skins/home.css" rel="stylesheet" type="text/css" /><!-- 博文主体样式 -->
<link href="${ ctx}/skins/picturemodel.css" rel="stylesheet"  type="text/css" /> <!-- 博文中多幅图片模板设计 -->

<style type="text/css">

.page-content {
	width: 1200px;
	margin: 0 auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;
	padding-top: 20px;
}

#column-main {
	width: 665px;
	float: left;
	border-left: dotted 0px;
	background-color: rgba(232, 240, 238, 0.16); 
	padding-left: 10px;
	border-left: dotted 0px;
	/*length> <length> <length>? <length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色*/
	padding-right: 20px;
	-moz-box-shadow: 0 10px 20px #b0b3b6;
	/*我们在这里设置阴影，同时设置padding-right使得其偏向于右边，（注：需要设置boreder当然需要设置其宽度为0使其看不见）*/
	-webkit-box-shadow: 0 10px 20px #b0b3b6;
	box-shadow: 0 10px 20px #b0b3b6;
}

#column-left {
	margin-right: 14px;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 50px;
	width: 160px;
	float: left;
	margin-left: 50px;
}

#column-right {
	width: 250px;
	float: right;
}


.mark-star {
	float: right;
	position: absolute;
	padding-left: 590px;
    margin-top: -6px;
}

.nupt-line-buttom {
	height: 10px;
	margin-left: -57px;
	background: url('${ctx}/img/feed-line.png') -612px bottom no-repeat;
}

.nupt-line-top {
	height: 10px;
	margin-left: -2px;
	background: url('${ctx}/img/feed-line.png') 0 0 no-repeat;
}

.feed-com {
	position: relative;
	zoom: 1;
	border: dotted 0px;
	padding: 1px 1px;
	background-color: rgba(245, 245, 245, 0.4);
	float: left;
}

.feed-com .feed-ft-triangle {
	width: 15px;
	height: 15px;
	position: relative;
	top: -15px;
	left: 555px;
	z-index: 1;
	background: url('${ctx}/img/feed-triangle.png') no-repeat;
}

.feed-comment-input {
	margin-top: -10px;
	width: 576px;
	border-radius: 4px;
	overflow: hidden;
	color: #666;
	background: #f7f8f8;
	border: 1px solid #C9CACC;
	border-bottom: 1px solid #B1B3B5;
	box-shadow: 0 1px 1px #C9CACC;
	height: 28px;
	font-size: large;
}

.article-title{
 text-align: center;
 font-size: 16px;
 color: rgb(37, 31, 65);
 font-weight: 900;
}


</style>

<!--  设置公共变量   -->
<script type="text/javascript">
   var ctx = "${ctx}";  
   var userId = "${me.id}";  
   var username = "${me.username}";
</script>


<script type="text/javascript">
$(document).ready(function() {
	 readyArticle();      //加载博文功能的article.js脚本实现
});
    
</script>
<title> 365文章首页 </title>
<meta name="keywords" content="document share, blog, njupt" />
<meta name="description" content="http://www.njupt.net 分享平台博客来记录我们的心声" />
</head>
<body id="page-home">
	<%@ include file="/common/header.jsp"%>
	<div class='page-content'>

		<!-- 做边框个人信息 -->
		<div id='column-left'><%@ include file="/common/left_blog_index.jsp"%></div>

		<!-- 中间部分：发表博文、博文浏览 -->
		<div id="column-main">
            
		   <div  style="border-bottom: dotted 1px;">
		   <span  style="padding-right: 18px;font-size: 18px;">
		      <a href="${ctx }/index.jsp"> 首&nbsp;&nbsp;页</a> <span style="font-size: 12px;">>></span>文章列表
		   </span>  
		   </div>   
		          
			<!-- 博客的正文 -->
			<div class="feed-list" id="feed-list">
		<c:forEach var="article" items="${articlePagination.items }" varStatus="status">
					<div class="feed-photo" data-articleId="${article.id }">
						<!-- 头像的设置 -->
						<div class="feed-avatar">
							<nativeSql:sqlQueryForUnique
								sql="select f_picture_appended as avatarId from app_user  where f_id = ${article.creatorId } "
								id="avatar" />
							
							
							<img alt="头像"  class="blog-avatar"   <c:if test="${ article.creatorId == me.id}">data-from="me"</c:if> 
							  rel="${ctx }/widgets/avatarInfo.jsp?userId=${article.creatorId }"    title="${article.creatorName }" 
							  src="${ctx}/user/file.action?method:previewPic&fileId=${avatar.avatarId }">
						</div>


						<nativeSql:sqlQueryForUnique
							sql="select count(*) as cnt from t_article_mark where f_article_id =${article.id } and f_marker_id = ${me.id }"
							id="marksCnt" />
						<c:if test="${marksCnt.cnt == 0 }">
							<img src="${ctx }/img/star_off.gif" class="mark-star"
								data-status="0" data-articleId="${article.id }"></img>
						</c:if>
						<c:if test="${marksCnt.cnt > 0 }">
							<img src="${ctx }/img/star_on.gif" class="mark-star"
								data-status="1" data-articleId="${article.id }"></img>
						</c:if>

						<div class="pop-content">
							<div class="nupt-line-top"></div>
							<div class="feed-bd no-hd-content"
								style="background-color: rgb(255, 255, 255); padding: 5px 5px 20px 5px;">
								<nativeSql:sqlQueryForUnique sql="select f_blog_name as blogName FROM t_blog  where  f_id =${article.blogId }"  id="blogName"/>
								<div  class="article-title">
								   <span  style="float: right;padding-right: 18px;font-size: 12px;font-style: italic;color: rgba(26, 17, 17, 0.6);">
								     <a href="${ctx }/blog/blogIndex.jsp?blogId=${article.blogId }"  target="_blank"> ${blogName.blogName }</a>
								   </span>
								   <a href="${ctx }/blog/blog.action?method:article=xxx&articleId=${article.id }" target="_blank" title="查看完整博文">${article.title } </a></div>
								<div class="feed-ct">
                                   <!-- 分享音乐的显示 -->
                                   <nativeSql:sqlQueryForList
												sql="select * from t_media t  where  f_type = 1 and f_article_id =  ${article.id }"
												id="musics" />
                                   <c:forEach  items="${musics }"  var="music">
                                   <div>
                                       <Strong  style="float: left;padding-top: 8px;">${music.f_title}:</Strong>
                                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${music.f_html_code}
                                   </div>
                                   </c:forEach>
                                   <!-- 分享视频的显示 -->
                                   <nativeSql:sqlQueryForList
												sql="select * from t_media t  where  f_type = 2 and f_article_id =  ${article.id }"
												id="videos" />
                                   <c:forEach  items="${videos }"  var="video">
                                   <div >
                                                                                                                              土豆视频：<Strong>${video.f_title }</Strong><br>
                                       ${video.f_html_code}
                                   </div>
                                   </c:forEach>
                                   <!-- 关于图片的显示问题 -->
									<div class="feed-img-all post-one-img no-title ">
										<div class="feed-big-img">
											<!-- 关于多幅图片布局问题设计 -->
											<nativeSql:sqlQueryForList
												sql="select  *  from t_upload_file where f_article_id = ${article.id }"
												id="articlefiles" />
											<nativeSql:sqlQueryForUnique
												sql="select  count(*) as cnt  from t_upload_file where f_article_id = ${article.id }"
												id="articlefilesCnt" />

											<c:forEach items="${articlefiles }" var="articlefile"
												varStatus="index">
												<c:if test="${articlefilesCnt.cnt >4 }">
													<img class="feed-img-4-${ index.count % 4}"
														src="${ctx}/user/file.action?method:previewPic&fileId=${articlefile.f_id}">
													<c:set value="${articlefilesCnt.cnt -1 }"
														var="articlefilesCnt.cnt"></c:set>
												</c:if>
												<c:if test="${articlefilesCnt.cnt <=4 }">
													<img
														class="feed-img-${articlefilesCnt.cnt }-${ index.count % 4}"
														src="${ctx}/user/file.action?method:previewPic&fileId=${articlefile.f_id}">
												</c:if>
											</c:forEach>

										</div>
										<div class="feed-img-too-high-tip" style="width: 650px"></div>
									</div>

									<div class="feed-img-desc rich-content">
										<yn:cleanHtml str="${article.content }" id="articleNoHtml"/>
					                    <yn:shortIt len="150" str="${articleNoHtml}" id="articleText"/>
									   <p>${articleText }</p>
									
									</div>
								
								</div>
							<div class="feed-act">
	
  <!-- 添加顶和踩的功能 -->									
  <hql:queryForUnique hql="from TopStep where articleId = ${article.id} and username='${me.username}' " id="visit"/>
  <nativeSql:sqlQueryForUnique sql="select count(*) as Num from t_top_step where f_article_id = ${article.id} and f_action ='top' " id="topNum"/>
  <nativeSql:sqlQueryForUnique sql="select count(*) as Num from t_top_step where f_article_id = ${article.id} and f_action ='step' " id="stepNum"/>
  
  <div  style="float: left;">
  	<c:if test="${not empty visit || article.creatorId == me.id}">
  	<span style="color: red;"><strong><c:if test="${empty topNum.Num }">0</c:if>${topNum.Num}</strong>&nbsp;&nbsp;&nbsp;顶&nbsp;&nbsp;</span>|
  	<span style="color:rgb(21, 80, 233);"><strong><c:if test="${empty stepNum.Num }">0</c:if>${stepNum.Num}</strong>&nbsp;&nbsp;&nbsp;踩&nbsp;&nbsp;</span>
  	</c:if>
  	
  	<c:if test="${empty visit && article.creatorId != me.id}">
  	<div id="show-${article.id}">
  	<a href='javascript:void(0);'  onclick='digg("${me.username}","${article.id}", "${topNum.Num}","${stepNum.Num}",false);return false;'>
  	       <strong><c:if test="${empty topNum.Num }">0</c:if>${topNum.Num}</strong>&nbsp;&nbsp;&nbsp;顶&nbsp;&nbsp;</a>|
    <a href='javascript:void(0);'  onclick='digg("${me.username}","${article.id}","${topNum.Num}","${stepNum.Num}", true);return false;'>
           <strong><c:if test="${empty stepNum.Num }">0</c:if>${stepNum.Num}</strong>&nbsp;&nbsp;&nbsp;踩&nbsp;&nbsp;</a>
   	</div>
   	<div id="hidden-${article.id}"  style="display:none;"></div>
    </c:if>
  </div>
									
	<!--   显示标签 -->
<c:if test="${article.tags!=null }">

		<span class="showTags">   
		<nativeSql:sqlQueryForList sql="select  *  from t_tag_mark where f_relate_entity_id = ${article.id }" id="tags" />
		 <c:forEach  items="${tags }"  var="tag">
		<span><a href="${ctx}/blog/blog.action?method:articleTag&tag=${tag.f_tag_Name}"> <span class="opti">${tag.f_tag_Name}</span></a></span>
		</c:forEach>
		</span>							
</c:if>								
									
									<a class="feed-cmt" data-status="0"
										data-articleid="${article.id }">回应</a>
									
									<a class="feed-pre" title="查看该条博文全部内容"  target="_blank" href="${ctx }/blog/blog.action?method:article&articleId=${article.id}"
									   data-href="${ctx }/blog/article.jsp?articleId=${article.id}&nid=<%=(System.currentTimeMillis())%>&title=${article.title}">查看</a>
									
									
									<c:if test="${me.id == article.creatorId }">
									
									<a class="feed-del" data-articleid="${article.id }">删除</a>
                                    <a href="${ctx }/blog/blog.action?method:articleEditForm&articleId=${article.id}"
										class="feed-edit"
										data-href="${ctx }/blog/articleEditForm.jsp?articleId=${article.id}&nid=<%=(System.currentTimeMillis())%>&title=${article.title}">编辑</a>
									</c:if>
								</div>

							</div>
							<div class="nupt-line-buttom"></div>

							<!-- 回复部分的内容 -->
							<div class="feed-com" data-nid="feed-com-${article.id }"
								style="display: none;">
								<div class="feed-ft-triangle"></div>
								<input type="text" title="提醒：ctrl+enter提交"
									data-nid="${article.id }" class="feed-comment-input"
									onkeyup="javascript:return ctrlEnter(this,event);"></input>
								<div data-nid="feed-rep-content-${article.id }"></div>
								<nativeSql:sqlQueryForUnique
			                         sql="select count(*) as CommentsNum from t_article_comment  where f_article_id = ${article.id }"  id="CommentsNum" />
								    <!-- 每次只显示3条数据，如果大于3条数据的话，则显示获取更多回复的按钮 -->
                                   
                                   <c:if test="${CommentsNum.CommentsNum > 3 }">    
                                        <input type="button"  data-articleId="${article.id  }"  data-current-numbers="3"  class="feed-rep-more-button" value="获取更多回复"></input>  
                                  </c:if>
							</div>
						</div>
						<!-- POP END -->
						<div style="clear: both;"></div>
					</div>
				</c:forEach>				
<c:if test="${articlePagination.totalCount>20 }">
<div align="right">
	<c:set var="searchMethod" value="articleTag"/>
    <c:set var="pagination" value="${articlePagination}"/>
    <%@ include file="/common/pagination.jsp"%>
</div>
</c:if>
			</div>
				<br> <br> 
		</div>
		
			<div id='column-right'><%@ include file="/common/right_blog.jsp"%></div>
	</div>


	<div style="clear: both;"></div>
	

<%@ include file="/common/footer.jsp"%>
	<%
		} catch (Exception e) {
			e.printStackTrace();
		}
	%>
</body>
</html>